<template>
  <div class="notfound-page">
    <FuzzyText text="404" :font-size="150" font-weight="900" color="#409EFF" :enable-hover="true" :base-intensity="0.18"
      :hover-intensity="0.5" />
    <div style="margin-top: 30px;">
      <FuzzyText text="not found" :font-size="100" font-weight="700" color="#409EFF" :enable-hover="true"
        :base-intensity="0.18" :hover-intensity="0.5" />
    </div>
    <div style="margin-top: 60px;">
      <el-button type="primary" @click="goHome" round size="large">
        返回首页
      </el-button>
    </div>
  </div>
</template>

<script setup>
import FuzzyText from '@/components/FuzzyText'

const router = useRouter()
const goHome = () => {
  router.push({ path: '/' })
}
</script>

<style scoped>
.notfound-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>